<extend name="Common/base"/>
<block name="title">学员作品</block>
<block name="css">
    <link rel="stylesheet" href="../../../../Public/Home/styles/product.css">
</block>
<block name="content">
    <div class="section">
        <div class="header-title">
            <h3 class="cn-title">临摹图标</h3>
        </div>
        <div class="tubiao2 row">
            <div class="col-md-4 col-sm-6 col-xs-6"><img src="../../../../Public/Home/images/tubiao1.jpg" alt=""></div>
            <div class="col-md-4 col-sm-6 col-xs-6"><img src="../../../../Public/Home/images/tubiao2.jpg" alt=""></div>
            <div class="col-md-4 col-sm-6 col-xs-6"><img src="../../../../Public/Home/images/tubiao3.jpg" alt=""></div>
            <div class="col-md-4 col-sm-6 col-xs-6"><img src="../../../../Public/Home/images/tubiao4.jpg" alt=""></div>
            <div class="col-md-4 col-sm-6 col-xs-6"><img src="../../../../Public/Home/images/tubiao5.jpg" alt=""></div>
            <div class="col-md-4 col-sm-6 col-xs-6"><img src="../../../../Public/Home/images/tubiao6.jpg" alt=""></div>
        </div>
    </div>
    <div class="section">
        <div class="header-title">
            <h2 class="cn-title">UI设计</h2>
            <h3 class="en-title">uidesign</h3>

            <div class="tubiao">
                <div class="items">
                    <div class="item" data-url="123"><img src="../../../../Public/Home/images/ui1.png" alt=""></div>
                    <div class="item" data-url="123"><img src="../../../../Public/Home/images/ui2.png" alt=""></div>
                    <div class="item" data-url="123"><img src="../../../../Public/Home/images/ui3.png" alt=""></div>
                    <div class="item" data-url="123"><img src="../../../../Public/Home/images/ui4.png" alt=""></div>
                    <div class="item" data-url="123"><img src="../../../../Public/Home/images/ui5.png" alt=""></div>
                    <div class="item" data-url="123"><img src="../../../../Public/Home/images/ui6.png" alt=""></div>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="footer_content">
    <div class="header-title">
        <h2 class="cn-title">互联网视觉</h2>
        <h3 class="en-title">internet Vision</h3>
    </div>
</block>
<block name="js">
    <script>
        $(function(){
            $('.container').fullpage({
                afterLoad:function(link, index){
                    if (index == 2) {
                        $('.dot').each(function (index) {
                            $(this).transition({ rotate: 420*(index+1)+'deg' , opacity: 1} , 2500 );
                        })
                    }
                    $('.section').eq(index-1).find('.header-title').css('opacity',1).addClass('animated bounceInUp');
                },
                verticalCentered : false,
                resize : true
            });


            var itemNum = 6;//要旋转的div的数量
            var itemDeg = 360 / itemNum;//计算平均偏移角度，后面的itemDeg*index是不同索引div的偏移角度

            $('.item').each(function(index){
                $(this).css('transform' , 'rotateY('+(itemDeg *  (index)) + "deg) translateZ(280px)");
            });
            // transform js

        });
    </script>
</block>
